<template>
<view class="proList">
	<view class="proItem" v-for="(item,index) of proList" :key="item._id">
		<view class="proWrap">
			<view class="picWrap">
				<image :src="item.coverPic"></image>
			</view>
			<view class="proInfo">
				<text class="title">{{item.title}}</text>
				<text class="viceTitle">{{item.viceTitle}}</text>
			</view>
		</view>
		<view class="cost">
			<view class="proNum"><text class="tip">商品件数:</text><text class="info">x{{item.number}}</text></view>
			<view class="price"><text class="tip">商品单价:</text><text class="info">{{item.price}}积分</text></view>
			<view class="freight"><text class="tip">运费:</text><text class="info">包邮</text></view>
			<view class="discount"><text class="tip">优惠活动:</text><text class="info">0</text></view>
		</view>
		<view class="total">
			<text class="totalNum">共{{item.number}}件</text>
			<text class="totalPrice">小计：<text>{{item.number*item.price}}积分</text></text>
		</view>
	</view>
	<view class="totalWrap">
		<text class="totalNum">共{{total.number}}件</text>
		<text class="totalPrice">总计：<text>{{total.price}}积分</text></text>
		<view class="btnWrap">
			<u-button type="success" shape="circle" text="去结算" @click="addOrder"></u-button>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		computed: {
			proList() {
				return this.$store.state.shopping.goods
			},
			total(){
			  const newProList = {}
			  let num = 0
			  let price = 0
			  this.proList.forEach(item=>{
			    num += item.number
			    price += item.number * item.price
			  })
			  newProList.number = num
			  newProList.price = price
			  return newProList
			},
			aid(){
				const defAddress = this.$store.state.shopping.defaultAddress
				return defAddress._id !== undefined? defAddress._id : ''
			}
		},
		methods:{
			async addOrder(){
				if(!this.aid){
					uni.showToast({
						title:'未添加收货地址',
						icon:'error',
						duration:2000
					})
					return
				}
				const {code,data} = await this.$axios.api.addOrder({
					aid:this.aid,
					product:this.proList
				})
				if(code === 200){
					let orderNum = ''
					const oid = []
					data.forEach(item=>{
						orderNum = item.orderNumber
						oid.push(item._id)
					})
					uni.navigateTo({
					  url:`/subcom-shop/OrderDetail/OrderDetail?orderInfo=${JSON.stringify({orderNum,oid})}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
 .proList {
	width: 100%;
    .proItem {
		height: auto;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 20rpx 0;
		.proWrap{
			min-height: 160rpx;
			display: flex;
			align-items: center;
			.picWrap{
				width: 160rpx;
				height: 160rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.proInfo{
				flex: 1;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				.title{
					font-size: 26rpx;
					font-weight: bold;
				}
				.viceTitle{
					font-size: 24rpx;
					color: rgb(184, 184, 184);
				}
			}
		}
		.cost{
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			.proNum,.price,.freight,.discount{
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				.tip{
					width: 160rpx;
					text-align: right;
				}
				.info{
					flex: 1;
					text-align: right;
				}
			}
		}
		.total{
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.totalNum{
				font-size: 24rpx;
				color: rgb(167, 167, 167);
			}
			.totalPrice{
				font-size: 26rpx;
				margin-left: 15rpx;
				text{
					font-size: 28rpx;
					color: rgb(31, 182, 131);
				}
			}
		}
    }
	.totalWrap{
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		.totalNum{
			flex-shrink: 0;
			font-size: 24rpx;
			color: rgb(167, 167, 167);
		}
		.totalPrice{
			flex-shrink: 0;
			font-size: 26rpx;
			margin:0 15rpx ;
			text{
				font-size: 28rpx;
				color: rgb(31, 182, 131);
			}
		}
		.btnWrap{
			width: 200rpx;
		}
	}
}
</style>
